<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/zzsc.css">
    <link rel="stylesheet" type="text/css" href="css/style2.css">

    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript">

        // 棋手编号 0 ~ 3 (包含3)
        let piecesPlay = 0;

        // 其他棋手的编号
        let otherFirstPlayer;
        let otherSecondPlayer;
        let otherThirdPlayer;

        // 全局变量
        let piecesColor = ['r1', 'y1', 'b1', 'g1']; // 棋手所用棋子颜色标志
        let notPosition = ['r2', 'y2', 'b2', 'g2']; // 棋手在该区域不能下棋子标志
        let canPosition = ['r3', 'y3', 'b3', 'g3']; // 棋手可在该区域下棋子标志
        let color = ['red', 'yellow', 'blue', 'green'];
        let con; //棋子需要用到的数组
        let boxIndex; // 棋盘需要用到的数组
        // 以最中间的一个格子为中心，上下左右各含有几个棋子
        let leftNum;
        let rightNum;
        let upperNum;
        let lowerNum;
        let determine; // 标记哪些棋子被用了
        let choose = 0;// 聚焦的棋子
        let first = true; // 标记是否下的为第一步

        // 屏幕的高和宽
        let scWidth = screen.width;
        let scHeight = screen.height;

        // 旋转、翻转需要用到的参数
        let angle1 = -1;
        let angle2 = 90;
        let angle3 = -1;

        // 棋盘参数
        let boxLength = 800;
        let gridLength = 40;

        $(function() {

            websocket();
            // 初始化棋盘

            $("#bgmup").click(function () {
                var audio =$('#bgm') ;//jQuery对象
                var au=audio.get(0); //DOM对象
                au.pause();
                $("#bgmup").css("display","none");
                $("#bgmoff").css("display","inline-block");
            });

            $("#bgmoff").click(function () {
                var audio =$('#bgm') ;//jQuery对象
                var au=audio.get(0); //DOM对象
                au.play();
                $("#bgmoff").css("display","none");
                $("#bgmup").css("display","inline-block");
            });

            $('#button5').click(function () {
                var audio =$('#bm') ;//jQuery对象
                var au=audio.get(0); //DOM对象
                au.play();
                let r = confirm("是否确认跳过？");
                if(r == true){
                    this.flag = !this.flag;
                    abandon++;
                    send();
                }

            });
            let i = 0
            $('#button6').click(function () {
                var audio =$('#bm') ;//jQuery对象
                var au=audio.get(0); //DOM对象
                au.play();
                if(i > 0){
                    i--;
                    drawChessBoard(replay[i]);
                }else {
                    drawChessBoard(replay[i]);
                }
            });

            $('#button7').click(function () {
                var audio =$('#bm') ;//jQuery对象
                var au=audio.get(0); //DOM对象
                au.play();
                if(i < rnum){
                    i++;
                    drawChessBoard(replay[i]);
                }else {
                    drawChessBoard(replay[i]);
                }
            });

        })

        // 初始化棋盘
        function initChessBoard() {
            // 棋盘尺寸 20 * 20
            let boardSize = 20 * 20;
            let grid = '';
            for (let i = 0; i < boardSize; i++) {
                grid += '<div class="grid' + (i + 1) + '"></div>';
            }
            $('.chess-board').html(grid);
            boxIndex = new Array();
            for (let i = 0; i < 21; i++) {
                boxIndex[i] = new Array();
                for (let j = 0; j < 21; j++) {
                    boxIndex[i][j] = '0';
                }
            }
            boxIndex[20][1] = 'r3';
            boxIndex[20][20] = 'y3';
            boxIndex[1][20] = 'b3';
            boxIndex[1][1] = 'g3';
        }

        // 初始化各玩家棋子参数
        function initChessPlay() {
            con = new Array();
            leftNum = new Array();
            rightNum = new Array();
            upperNum = new Array();
            lowerNum = new Array();
            determine = new Array();
            for (let i = 0; i <= 21; i++) {
                con[i] = new Array();
                leftNum[i] = 0;
                rightNum[i] = 0;
                upperNum[i] = 0;
                lowerNum[i] = 0;
                determine[i] = false;
                for (let j = 0; j < 8; j++) {
                    con[i][j] = new Array();
                    for (let k = 0; k < 8; k++) {
                        con[i][j][k] = 0;
                    }
                }
            }

            for (let i = 1; i <= 21; i++) {
                switch (i) {
                    case 1:
                        con[i][4][4] = piecesColor[piecesPlay];
                        con[i][3][4] = con[i][4][3] = con[i][4][5] = con[i][5][4] = notPosition[piecesPlay];
                        con[i][3][3] = con[i][3][5] = con[i][5][3] = con[i][5][5] = canPosition[piecesPlay];
                        leftNum[i] = 0;
                        rightNum[i] = 0;
                        upperNum[i] = 0;
                        lowerNum[i] = 0;
                        break;
                    case 2:
                        con[i][4][4] = con[i][4][5] = piecesColor[piecesPlay];
                        con[i][3][4] = con[i][3][5] = con[i][4][3] = con[i][4][6] = con[i][5][4] = con[i][5][5] = notPosition[piecesPlay];
                        con[i][3][3] = con[i][3][6] = con[i][5][3] = con[i][5][6] = canPosition[piecesPlay];
                        leftNum[i] = 0;
                        rightNum[i] = 1;
                        upperNum[i] = 0;
                        lowerNum[i] = 0;
                        break;
                    case 3:
                        con[i][4][3] = con[i][4][4] = con[i][4][5] = piecesColor[piecesPlay];
                        con[i][3][3] = con[i][3][4] = con[i][3][5] = con[i][4][2] = con[i][4][6] = con[i][5][3] = con[i][5][4] = con[i][5][5] = notPosition[piecesPlay];
                        con[i][3][2] = con[i][3][6] = con[i][5][2] = con[i][5][6] = canPosition[piecesPlay];
                        leftNum[i] = 1;
                        rightNum[i] = 1;
                        upperNum[i] = 0;
                        lowerNum[i] = 0;
                        break;
                    case 4:
                        con[i][3][4] = con[i][4][4] = con[i][4][5] = piecesColor[piecesPlay];
                        con[i][2][4] = con[i][3][3] = con[i][3][5] = con[i][4][3] = con[i][4][6] = con[i][5][4] = con[i][5][5] = notPosition[piecesPlay];
                        con[i][2][3] = con[i][2][5] = con[i][3][6] = con[i][5][3] = con[i][5][6] = canPosition[piecesPlay];
                        leftNum[i] = 0;
                        rightNum[i] = 1;
                        upperNum[i] = 1;
                        lowerNum[i] = 0;
                        break;
                    case 5:
                        con[i][4][3] = con[i][4][4] = con[i][4][5] = con[i][4][6] = piecesColor[piecesPlay];
                        con[i][3][3] = con[i][3][4] = con[i][3][5] = con[i][3][6] = con[i][4][2] = con[i][4][7] = con[i][5][3] = con[i][5][4] = con[i][5][5] = con[i][5][6] = notPosition[piecesPlay];
                        con[i][3][2] = con[i][3][7] = con[i][5][2] = con[i][5][7] = canPosition[piecesPlay];
                        leftNum[i] = 1;
                        rightNum[i] = 2;
                        upperNum[i] = 0;
                        lowerNum[i] = 0;
                        break;
                    case 6:
                        con[i][3][3] = con[i][4][3] = con[i][4][4] = con[i][4][5] = piecesColor[piecesPlay];
                        con[i][2][3] = con[i][3][2] = con[i][3][4] = con[i][3][5] = con[i][4][2] = con[i][4][6] = con[i][5][3] = con[i][5][4] = con[i][5][5] = notPosition[piecesPlay];
                        con[i][2][2] = con[i][2][4] = con[i][3][6] = con[i][5][2] = con[i][5][6] = canPosition[piecesPlay];
                        leftNum[i] = 1;
                        rightNum[i] = 1;
                        upperNum[i] = 1;
                        lowerNum[i] = 0;
                        break;
                    case 7:
                        con[i][3][4] = con[i][4][3] = con[i][4][4] = con[i][4][5] = piecesColor[piecesPlay];
                        con[i][2][4] = con[i][3][3] = con[i][3][5] = con[i][4][2] = con[i][4][6] = con[i][5][3] = con[i][5][4] = con[i][5][5] = notPosition[piecesPlay];
                        con[i][2][3] = con[i][2][5] = con[i][3][2] = con[i][3][6] = con[i][5][2] = con[i][5][6] = canPosition[piecesPlay];
                        leftNum[i] = 1;
                        rightNum[i] = 1;
                        upperNum[i] = 1;
                        lowerNum[i] = 0;
                        break;
                    case 8:
                        con[i][3][3] = con[i][3][4] = con[i][4][3] = con[i][4][4] = piecesColor[piecesPlay];
                        con[i][2][3] = con[i][2][4] = con[i][3][2] = con[i][3][5] = con[i][4][2] = con[i][4][5] = con[i][5][3] = con[i][5][4] = notPosition[piecesPlay];
                        con[i][2][2] = con[i][2][5] = con[i][5][2] = con[i][5][5] = canPosition[piecesPlay];
                        leftNum[i] = 1;
                        rightNum[i] = 0;
                        upperNum[i] = 1;
                        lowerNum[i] = 0;
                        break;
                    case 9:
                        con[i][3][3] = con[i][3][4] = con[i][4][4] = con[i][4][5] = piecesColor[piecesPlay];
                        con[i][2][3] = con[i][2][4] = con[i][3][2] = con[i][3][5] = con[i][4][3] = con[i][4][6] = con[i][5][4] = con[i][5][5] = notPosition[piecesPlay];
                        con[i][2][2] = con[i][2][5] = con[i][3][6] = con[i][4][2] = con[i][5][3] = con[i][5][6] = canPosition[piecesPlay];
                        leftNum[i] = 1;
                        rightNum[i] = 1;
                        upperNum[i] = 1;
                        lowerNum[i] = 0;
                        break;
                    case 10:
                        con[i][4][2] = con[i][4][3] = con[i][4][4] = con[i][4][5] = con[i][4][6] = piecesColor[piecesPlay];
                        con[i][3][2] = con[i][3][3] = con[i][3][4] = con[i][3][5] = con[i][3][6] = con[i][4][1] = con[i][4][7] = con[i][5][2] = con[i][5][3] = con[i][5][4] = con[i][5][5] = con[i][5][6] = notPosition[piecesPlay];
                        con[i][3][1] = con[i][3][7] = con[i][5][1] = con[i][5][7] = canPosition[piecesPlay];
                        leftNum[i] = 2;
                        rightNum[i] = 2;
                        upperNum[i] = 0;
                        lowerNum[i] = 0;
                        break;
                    case 11:
                        con[i][3][3] = con[i][4][3] = con[i][4][4] = con[i][4][5] = con[i][4][6] = piecesColor[piecesPlay];
                        con[i][2][3] = con[i][3][2] = con[i][3][4] = con[i][3][5] = con[i][3][6] = con[i][4][2] = con[i][4][7] = con[i][5][3] = con[i][5][4] = con[i][5][5] = con[i][5][6] = notPosition[piecesPlay];
                        con[i][2][2] = con[i][2][4] = con[i][3][7] = con[i][5][2] = con[i][5][7] = canPosition[piecesPlay];
                        leftNum[i] = 1;
                        rightNum[i] = 2;
                        upperNum[i] = 1;
                        lowerNum[i] = 0;
                        break;
                    case 12:
                        con[i][3][4] = con[i][4][3] = con[i][4][4] = con[i][4][5] = con[i][4][6] = piecesColor[piecesPlay];
                        con[i][2][4] = con[i][3][3] = con[i][3][5] = con[i][3][6] = con[i][4][2] = con[i][4][7] = con[i][5][3] = con[i][5][4] = con[i][5][5] = con[i][5][6] = notPosition[piecesPlay];
                        con[i][2][3] = con[i][2][5] = con[i][3][2] = con[i][3][7] = con[i][5][2] = con[i][5][7] = canPosition[piecesPlay];
                        leftNum[i] = 1;
                        rightNum[i] = 2;
                        upperNum[i] = 1;
                        lowerNum[i] = 0;
                        break;
                    case 13:
                        con[i][3][4] = con[i][4][3] = con[i][4][4] = con[i][4][5] = con[i][5][4] = piecesColor[piecesPlay];
                        con[i][2][4] = con[i][3][3] = con[i][3][5] = con[i][4][2] = con[i][4][6] = con[i][5][3] = con[i][5][5] = con[i][6][4] = notPosition[piecesPlay];
                        con[i][2][3] = con[i][2][5] = con[i][3][2] = con[i][3][6] = con[i][5][2] = con[i][5][6] = con[i][6][3] = con[i][6][5] = canPosition[piecesPlay];
                        leftNum[i] = 1;
                        rightNum[i] = 1;
                        upperNum[i] = 1;
                        lowerNum[i] = 1;
                        break;
                    case 14:
                        con[i][3][3] = con[i][3][4] = con[i][4][3] = con[i][4][4] = con[i][4][5] = piecesColor[piecesPlay];
                        con[i][2][3] = con[i][2][4] = con[i][3][2] = con[i][3][5] = con[i][4][2] = con[i][4][6] = con[i][5][3] = con[i][5][4] = con[i][5][5] = notPosition[piecesPlay];
                        con[i][2][2] = con[i][2][5] = con[i][3][6] = con[i][5][2] = con[i][5][6] = canPosition[piecesPlay];
                        leftNum[i] = 1;
                        rightNum[i] = 1;
                        upperNum[i] = 1;
                        lowerNum[i] = 0;
                        break;
                    case 15:
                        con[i][3][3] = con[i][3][5] = con[i][4][3] = con[i][4][4] = con[i][4][5] = piecesColor[piecesPlay];
                        con[i][2][3] = con[i][2][5] = con[i][3][2] = con[i][3][4] = con[i][3][6] = con[i][4][2] = con[i][4][6] = con[i][5][3] = con[i][5][4] = con[i][5][5] = notPosition[piecesPlay];
                        con[i][2][2] = con[i][2][4] = con[i][2][6] = con[i][5][2] = con[i][5][6] = canPosition[piecesPlay];
                        leftNum[i] = 1;
                        rightNum[i] = 1
                        upperNum[i] = 1;
                        lowerNum[i] = 0;
                        break;
                    case 16:
                        con[i][3][4] = con[i][4][4] = con[i][5][3] = con[i][5][4] = con[i][5][5] = piecesColor[piecesPlay];
                        con[i][2][4] = con[i][3][3] = con[i][3][5] = con[i][4][3] = con[i][4][5] = con[i][5][2] = con[i][5][6] = con[i][6][3] = con[i][6][4] = con[i][6][5] = notPosition[piecesPlay];
                        con[i][2][3] = con[i][2][5] = con[i][4][2] = con[i][4][6] = con[i][6][2] = con[i][6][6] = canPosition[piecesPlay];
                        leftNum[i] = 1;
                        rightNum[i] = 1;
                        upperNum[i] = 1;
                        lowerNum[i] = 1;
                        break;
                    case 17:
                        con[i][3][3] = con[i][4][3] = con[i][4][4] = con[i][4][5] = con[i][5][4] = piecesColor[piecesPlay];
                        con[i][2][3] = con[i][3][2] = con[i][3][4] = con[i][3][5] = con[i][4][2] = con[i][4][6] = con[i][5][3] = con[i][5][5] = con[i][6][4] = notPosition[piecesPlay];
                        con[i][2][2] = con[i][2][4] = con[i][3][6] = con[i][5][2] = con[i][5][6] = con[i][6][3] = con[i][6][5] = canPosition[piecesPlay];
                        leftNum[i] = 1;
                        rightNum[i] = 1;
                        upperNum[i] = 1;
                        lowerNum[i] = 1;
                        break;
                    case 18:
                        con[i][3][3] = con[i][4][3] = con[i][4][4] = con[i][4][5] = con[i][5][5] = piecesColor[piecesPlay];
                        con[i][2][3] = con[i][3][2] = con[i][3][4] = con[i][3][5] = con[i][4][2] = con[i][4][6] = con[i][5][3] = con[i][5][4] = con[i][5][6] = con[i][6][5] = notPosition[piecesPlay];
                        con[i][2][2] = con[i][2][4] = con[i][3][6] = con[i][5][2] = con[i][6][4] = con[i][6][6] = canPosition[piecesPlay];
                        leftNum[i] = 1;
                        rightNum[i] = 1;
                        upperNum[i] = 1;
                        lowerNum[i] = 1;
                        break;
                    case 19:
                        con[i][3][3] = con[i][4][3] = con[i][4][4] = con[i][5][4] = con[i][5][5] = piecesColor[piecesPlay];
                        con[i][2][3] = con[i][3][2] = con[i][3][4] = con[i][4][2] = con[i][4][5] = con[i][5][3] = con[i][5][6] = con[i][6][4] = con[i][6][5] = notPosition[piecesPlay];
                        con[i][2][2] = con[i][2][4] = con[i][3][5] = con[i][4][6] = con[i][5][2] = con[i][6][3] = con[i][6][6] = canPosition[piecesPlay];
                        leftNum[i] = 1;
                        rightNum[i] = 1;
                        upperNum[i] = 1;
                        lowerNum[i] = 1;
                        break;
                    case 20:
                        con[i][3][3] = con[i][3][4] = con[i][4][4] = con[i][4][5] = con[i][4][6] = piecesColor[piecesPlay];
                        con[i][2][3] = con[i][2][4] = con[i][3][2] = con[i][3][5] = con[i][3][6] = con[i][4][3] = con[i][4][7] = con[i][5][4] = con[i][5][5] = con[i][5][6] = notPosition[piecesPlay];
                        con[i][2][2] = con[i][2][5] = con[i][3][7] = con[i][4][2] = con[i][5][3] = con[i][5][7] = canPosition[piecesPlay];
                        leftNum[i] = 1;
                        rightNum[i] = 2;
                        upperNum[i] = 1;
                        lowerNum[i] = 0;
                        break;
                    case 21:
                        con[i][2][4] = con[i][3][4] = con[i][4][4] = con[i][4][5] = con[i][4][6] = piecesColor[piecesPlay];
                        con[i][1][4] = con[i][2][3] = con[i][2][5] = con[i][3][3] = con[i][3][5] = con[i][3][6] = con[i][4][3] = con[i][4][7] = con[i][5][4] = con[i][5][5] = con[i][5][6] = notPosition[piecesPlay];
                        con[i][1][3] = con[i][1][5] = con[i][3][7] = con[i][5][3] = con[i][5][7] = canPosition[piecesPlay];
                        leftNum[i] = 0;
                        rightNum[i] = 2;
                        upperNum[i] = 2;
                        lowerNum[i] = 0;
                        break;
                }
            }
        }

        // 画出棋子
        function drawChess() {
            for (let i = 1; i <= 21; ++i) {
                $('.chess-place').append('<div class="chess-container' + i + '"></div>');
                $('.chess-container' + i).css({
                    'width': 100 + 'px',
                    'height': 100 + 'px',
                    'margin': 5 + 'px',
                    'display': 'block'
                });
                for (let j = 2; j <= 6; ++j) {
                    for (let k = 2; k <= 6; ++k) {
                        if (con[i][j][k] !== piecesColor[piecesPlay]) {
                            $('.chess-container' + i).append('<div style="visibility: hidden;"></div>');
                        } else {
                            $('.chess-container' + i).append('<div class="drag' + i + '"></div>');
                            $('.drag' + i).css({
                                'outline': '1px solid #ffffff',
                                'cursor': 'pointer',
                                'background-color': color[piecesPlay]
                            });
                        }
                    }
                }
                $('.chess-container' + i + ' div').css({
                    'width': 20 + 'px',
                    'height': 20 + 'px'
                });
            }
        }

        // 为每个在候选区的棋子添加点击事件，使其可以显示在展示区
        function candChessClick() {
            for (let i = 1; i <= 21; ++i) {
                $('.drag' + i).click(function () {
                    if (determine[choose] === false) {
                        $('.exhi-content' + ' div').remove();
                        $('.chess-place' + ' .chess-container' + choose).show();
                    }
                    $('.chess-container' + i).clone().appendTo('.exhi-content');
                    $('.exhi-content').children().children('.drag' + i).addClass('move-chess');
                    $('.exhi-content').children().css({
                        'position': 'absolute',
                        'width': 300 + 'px',
                        'height': 300 + 'px',
                        'margin': ''
                    });
                    $('.exhi-content').children().children().css({
                        'width': 60 + 'px',
                        'height': 60 + 'px'
                    });
                    $('.chess-place' + ' .chess-container' + i).hide();
                    choose = i;
                    move();
                });
            }
        }

        // 展示区内的棋子旋转和翻转操作
        function chessChangeOperating() {
            // 左右翻转
            $('#button1').off("click").click(function (event) {
                //音效
                var audio =$('#bm') ;//jQuery对象
                var au=audio.get(0); //DOM对象
                au.play();

                let temp = leftNum[choose];
                leftNum[choose] = rightNum[choose];
                rightNum[choose] = temp;
                $('.exhi-content').children().css({
                    'transform': 'scaleX(' + angle1 + ')',
                    '-webkit-transform': 'scaleX(' + angle1 + ')',
                    'transition': 'transform .5s'
                });
                setTimeout(function () {
                    let ck = new Array();
                    for (let j = 0; j < 8; j++) {
                        ck[j] = new Array();
                        for (let k = 0; k < 8; k++) {
                            ck[j][k] = 0;
                        }
                    }
                    for (let j = 1; j <= 7; j++) {
                        for (let k = 1; k <= 7; k++) {
                            ck[j][8 - k] = con[choose][j][k];
                        }
                    }
                    graphicsChanges(ck, choose);
                }, 500);
                event.preventDefault();
            });

            // 旋转
            $('#button2').off("click").click(function (event) {
                //音效
                var audio =$('#bm') ;//jQuery对象
                var au=audio.get(0); //DOM对象
                au.play();

                let temp = leftNum[choose];
                leftNum[choose] = lowerNum[choose];
                lowerNum[choose] = rightNum[choose];
                rightNum[choose] = upperNum[choose];
                upperNum[choose] = temp;
                $('.exhi-content').children().css({
                    'transform': 'rotate(' + angle2 + 'deg)',
                    '-webkit-transform': 'rotate(' + angle2 + 'deg)',
                    'transition': 'transform .5s'
                });
                setTimeout(function () {
                    let ck = new Array();
                    for (let j = 0; j < 8; j++) {
                        ck[j] = new Array();
                        for (let k = 0; k < 8; k++) {
                            ck[j][k] = 0;
                        }
                    }
                    for (let j = 1; j <= 7; j++) {
                        for (let k = 1; k <= 7; k++) {
                            ck[k][8 - j] = con[choose][j][k];
                        }
                    }
                    graphicsChanges(ck, choose);
                }, 500);
                event.preventDefault();
            });

            // 上下翻转
            $('#button3').off("click").click(function (event) {
                //音效
                var audio =$('#bm') ;//jQuery对象
                var au=audio.get(0); //DOM对象
                au.play();

                let temp = upperNum[choose];
                upperNum[choose] = lowerNum[choose];
                lowerNum[choose] = temp;
                $('.exhi-content').children().css({
                    'transform': 'scaleY(' + angle3 + ')',
                    '-webkit-transform': 'scaleY(' + angle3 + ')',
                    'transition': 'transform .5s'
                });
                setTimeout(function () {
                    let ck = new Array();
                    for (let j = 0; j < 8; j++) {
                        ck[j] = new Array();
                        for (let k = 0; k < 8; k++) {
                            ck[j][k] = 0;
                        }
                    }
                    for (let j = 1; j <= 7; j++) {
                        for (let k = 1; k <= 7; k++) {
                            ck[8 - j][k] = con[choose][j][k];
                        }
                    }
                    graphicsChanges(ck, choose);
                }, 500);
                event.preventDefault();
            });
        }

        function graphicsChanges(ck, i) {
            $('.exhi-content').children().remove();
            $('.exhi-content').append('<div class="chess-container' + i + '"></div>');
            $('.exhi-content').children().css({
                'position': 'absolute',
                'width': 300 + 'px',
                'height': 300 + 'px',
                'margin': ''
            });
            //在每个container容器中画出棋子
            for (let j = 2; j <= 6; j++) {
                for (let k = 2; k <= 6; k++) {
                    if (ck[j][k] !== piecesColor[piecesPlay]) {
                        $('.exhi-content').children().append('<div style="visibility: hidden;"></div>');
                    } else {
                        $('.exhi-content').children().append('<div class="drag' + i + ' move-chess"></div>');
                        $('.drag' + i).css({
                            'outline': '1px solid #ffffff',
                            'cursor': 'pointer',
                            'background-color': color[piecesPlay]
                        });
                    }
                }
            }
            $('.exhi-content').children().children().css({
                'width': 60 + 'px',
                'height': 60 + 'px'
            });
            for (let j = 1; j <= 7; j++) {
                for (let k = 1; k <= 7; k++) {
                    con[i][j][k] = ck[j][k];
                }
            }
            move();
        }

        // 展示区鼠标按下、移动、松开事件
        function move() {
            let exhibitionLeft = $('.exhi-content').offset().left;
            let exhibitionTop = $('.exhi-content').offset().top;
            let originX = 100;
            let originY = 100;
            let centerX = 200;
            let centerY = 200;
            $('.move-chess').mousedown(function (event) {
                let startX = event.pageX;
                let startY = event.pageY;
                $('.exhi-content').children().css({
                    'width': 200 + 'px',
                    'height': 200 + 'px'
                });
                $('.exhi-content').children().children().css({
                    'width': 40 + 'px',
                    'height': 40 + 'px'
                });
                $('.exhi-content').children().css({
                    'left': (startX - exhibitionLeft - centerX + originX) + 'px',
                    'top': (startY - exhibitionTop - centerY + originY) + 'px'
                });
                event.stopPropagation();
                function moveFn (event) {
                    let nowX = event.pageX;
                    let nowY = event.pageY;
                    $('.exhi-content').children().css({
                        'left': (nowX - centerX - exhibitionLeft + originX) + 'px',
                        'top': (nowY - centerY - exhibitionTop + originY) + 'px'
                    });
                    //防止移动卡顿
                    event.preventDefault();
                }
                //添加移动方法
                $(document).on('mousemove', moveFn);
                $(document).mouseup(function (event) {
                    let boxLeftX = $('.box').offset().left;
                    let boxRightX = boxLeftX + boxLength;
                    let boxTopY = $('.box').offset().top;
                    let boxLowY = boxTopY + boxLength;
                    let nowX = event.pageX;
                    let nowY = event.pageY;
                    let minLeft = boxLeftX + leftNum[choose] * gridLength;
                    let maxRight = boxRightX - rightNum[choose] * gridLength;
                    let minTop = boxTopY + upperNum[choose] * gridLength;
                    let maxLow = boxLowY - lowerNum[choose] * gridLength;
                    let numX = Math.floor((nowX - boxLeftX) / gridLength);
                    let numY = Math.floor((nowY - boxTopY) / gridLength);
                    let piecesInBoxX = numX + 1;
                    let piecesInBoxY = numY + 1;
                    console.log('numX = ' + numX);
                    console.log('numY = ' + numY);
                    console.log('piecesInBoxX = ' + piecesInBoxX);
                    console.log('piecesInBoxY = ' + piecesInBoxY);
                    if (nowX > minLeft && nowX < maxRight && nowY > minTop && nowY < maxLow) {
                        $('.exhi-content').children().animate({
                            'left': (boxLeftX + numX * gridLength - gridLength * 2 - exhibitionLeft) + 'px',
                            'top': (boxTopY + numY * gridLength - gridLength * 2 - exhibitionTop) + 'px'
                        }, 500);
                        $('#button4').off("click").click(function () {
                            //音效
                            var audio =$('#bm') ;//jQuery对象
                            var au=audio.get(0); //DOM对象
                            au.play();

                            if(nowplayer == playernum){
                                if (first === true) {
                                    for (let j = piecesInBoxY - upperNum[choose]; j <= piecesInBoxY + lowerNum[choose]; j++) {
                                        for (let k = piecesInBoxX - leftNum[choose]; k <= piecesInBoxX + rightNum[choose]; k++) {
                                            if (con[choose][j - piecesInBoxY + 4][k - piecesInBoxX + 4] === piecesColor[piecesPlay] &&
                                                boxIndex[j][k] === canPosition[piecesPlay]) {
                                                first = false;
                                            }
                                        }
                                    }
                                    if (first === true) {
                                        switch (piecesPlay) {
                                            case 0:
                                                alert("第一步棋子只能放在左下角");
                                                break;
                                            case 1:
                                                alert("第一步棋子只能放在右下角");
                                                break;
                                            case 2:
                                                alert("第一步棋子只能放在右上角");
                                                break;
                                            case 3:
                                                alert("第一步棋子只能放在左上角");
                                                break;
                                        }
                                        changeSize();
                                    } else {
                                        markPieces(piecesInBoxX, piecesInBoxY);

                                    }
                                } else {
                                    placePieces(piecesInBoxX, piecesInBoxY);
                                }

                            }else {
                                let n = nowplayer + 1;
                                let p = playernum + 1;
                                alert("目前轮到第"+n+"位玩家下棋，"+"您是第"+p+"位，请稍等");
                            }


                        });
                    } else {
                        //松开后重新放大并回到原处
                        changeSize();
                    }
                    $(document).off('mousemove').off('mouseup');
                    $('.exhi-content').children().off('mouseup');
                });
            })
        }

        //松开后重新放大并回到原处
        function changeSize() {
            $('.exhi-content').children().css({
                'width': 300 + 'px',
                'height': 300 + 'px',
            });
            $('.exhi-content').children().children().css({
                'width': 60 + 'px',
                'height': 60 + 'px'
            });
            $('.exhi-content').children().animate({
                'left': 50 + 'px',
                'top': 50 + 'px'
            }, 1000);
        }

        //判断棋子是否可以放置在该位置
        function placePieces(piecesInBoxX, piecesInBoxY) {
            let confirm = true;
            let isAdjacent = false;
            let isOverlap = false;
            let piecesLeft = 4 - leftNum[choose];
            let piecesRight = 4 + rightNum[choose];
            let piecesUpper = 4 - upperNum[choose];
            let piecesLower = 4 + lowerNum[choose];

            // Role: 判断所放置的棋子是否与之前下的棋子粘合（不在空白处）  默认未粘合
            for (let j = piecesUpper; j <= piecesLower && isAdjacent === false; j++) {
                for (let k = piecesLeft; k <= piecesRight && isAdjacent === false; k++) {
                    if (con[choose][j][k] === piecesColor[piecesPlay] &&
                        boxIndex[j - 4 + piecesInBoxY][k - 4 + piecesInBoxX] !== '0'){
                        isAdjacent = true;
                    }
                }
            }

            // Role: 判断所放置的棋子是否与棋盘中其他棋子重合  默认未重合
            for (let j = piecesUpper; j <= piecesLower && isOverlap === false; j++) {
                for (let k = piecesLeft; k <= piecesRight && isOverlap === false; k++) {
                    let x = k - 4 + piecesInBoxX;
                    let y = j - 4 + piecesInBoxY;
                    if (con[choose][j][k] === piecesColor[piecesPlay] &&
                        (boxIndex[y][x] === piecesColor[piecesPlay]
                            || boxIndex[y][x] === piecesColor[otherFirstPlayer]
                            || boxIndex[y][x] === piecesColor[otherSecondPlayer]
                            || boxIndex[y][x] === piecesColor[otherThirdPlayer])){
                        isOverlap = true;
                    }
                }
            }

            if (isAdjacent === true && isOverlap === false){
                // Role: 判断棋子是否下在不可下的位置  默认可以下
                for (let j = piecesUpper; j <= piecesLower && confirm === true; j++) {
                    for (let k = piecesLeft; k <= piecesRight && confirm === true; k++) {
                        if (con[choose][j][k] === piecesColor[piecesPlay]){
                            // boxIndex[j - 4 + piecesInBoxY][k - 4 + piecesInBoxX] === notPosition[piecesPlay]
                            let array = boxIndex[j - 4 + piecesInBoxY][k - 4 + piecesInBoxX].split("/");
                            for (let l = 0; l < array.length; l++) {
                                if (array[l] === notPosition[piecesPlay]) {
                                    confirm = false;
                                }
                            }
                        }
                    }
                }
                if (confirm === true){
                    // Role: 防止不在可下位置的其他位置放置
                    for (let j = piecesUpper; j <= piecesLower && confirm === true; j++) {
                        for (let k = piecesLeft; k <= piecesRight && confirm === true; k++) {
                            if (con[choose][j][k] === piecesColor[piecesPlay]){
                                // boxIndex[j - 4 + piecesInBoxY][k - 4 + piecesInBoxX] === canPosition[piecesPlay]
                                let array = boxIndex[j - 4 + piecesInBoxY][k - 4 + piecesInBoxX].split("/");
                                for (let l = 0; l < array.length; l++) {
                                    if (array[l] === canPosition[piecesPlay]) {
                                        confirm = false;
                                        markPieces(piecesInBoxX, piecesInBoxY);
                                    }
                                }
                            }
                        }
                    }
                    if (confirm === true) {
                        alert("该位置不能放置棋子");
                        changeSize();
                    }
                }else{
                    alert("该位置不能放置棋子");
                    changeSize();
                }
            }else{
                alert("该位置不能放置棋子");
                changeSize();
            }
        }

        //对棋子在棋盘进行标记操作
        function markPieces(piecesInBoxX, piecesInBoxY) {
            let scanLeft = 4 - leftNum[choose] - 1;
            let scanRight = 4 + rightNum[choose] + 1;
            let scanUpper = 4 - upperNum[choose] - 1;
            let scanLower = 4 + lowerNum[choose] + 1;
            let scanBoxLeft = piecesInBoxX - leftNum[choose] - 1;
            let scanBoxRight = piecesInBoxX + rightNum[choose] + 1;
            let scanBoxUpper = piecesInBoxY - upperNum[choose] - 1;
            let scanBoxLower = piecesInBoxY + lowerNum[choose] + 1;
            for (let j = scanUpper, m = scanBoxUpper; j <= scanLower; j++, m++) {
                for (let k = scanLeft, n = scanBoxLeft; k <= scanRight; k++, n++) {
                    if (m >= 1 && m <= 20 && n >= 1 && n <= 20) {
                        // Role: (if作用)具有颜色的格子不进行渲染
                        if (boxIndex[m][n] !== piecesColor[piecesPlay]
                            && boxIndex[m][n] !== piecesColor[otherFirstPlayer]
                            && boxIndex[m][n] !== piecesColor[otherSecondPlayer]
                            && boxIndex[m][n] !== piecesColor[otherThirdPlayer]) {

                            if (con[choose][j][k] === canPosition[piecesPlay]) {
                                if (boxIndex[m][n] === '0') {
                                    boxIndex[m][n] = canPosition[piecesPlay];
                                } else {
                                    boxIndex[m][n] += "/" + canPosition[piecesPlay];
                                }
                            } else if (con[choose][j][k] === notPosition[piecesPlay]) {
                                if (boxIndex[m][n] === '0') {
                                    boxIndex[m][n] = notPosition[piecesPlay];
                                } else {
                                    boxIndex[m][n] += "/" + notPosition[piecesPlay];
                                }
                            } else if (con[choose][j][k] === piecesColor[piecesPlay]) {
                                boxIndex[m][n] = piecesColor[piecesPlay];
                            }

                        }
                    }
                }
            }
            $('.exhi-content').children().remove();
            determine[choose] = true;
            //向后端传递数组
            send();
            console.log(boxIndex);
            drawChessBoard(boxIndex);

        }

        // 渲染棋盘
        function drawChessBoard(boxIndex) {
            for (let i = 1; i <= 20; ++i) {
                for (let j = 1; j <= 20; ++j) {
                    let k = (i - 1) * 20 + j;

                    if (boxIndex[i][j] === 'r1') {
                        $('.grid' + k).css('background-color', 'red');
                    }
                    if (boxIndex[i][j] === 'y1') {
                        $('.grid' + k).css('background-color', 'yellow');
                    }
                    if (boxIndex[i][j] === 'b1') {
                        $('.grid' + k).css('background-color', 'blue');
                    }
                    if (boxIndex[i][j] === 'g1') {
                        $('.grid' + k).css('background-color', 'green');
                    }

                    if(boxIndex[i][j] != 'r1' && boxIndex[i][j] != 'y1' && boxIndex[i][j] != 'b1' && boxIndex[i][j] != 'g1')
                        $('.grid' + k).css('background-color', '');

                }
            }
        }

        //复盘
        var replay = new Array();
        //复盘计数
        var rnum = 0;
        //棋局人数
        var num;
        //判断是否能下
        var flag = true;
        //弃权人数
        var abandon = 0;
        //棋局号
        var chessnum = 0;
        //棋手号
        var playernum;
        //当前下棋的人的棋手号
        var nowplayer = 0;
        //用户名字
        var s = sessionStorage.getItem("player");
        // alert(s);
        $(".welcome").text("欢迎："+s);

        var webSocket;
        var commWebSocket;

        function websocket() {
            // document.getElementById("button4").style.display="none";

            if ("WebSocket" in window)
            {
                webSocket = new WebSocket("ws://localhost:8081/websocket2/"+s);

                //连通之后的回调事件
                webSocket.onopen = function(evt)
                {
                    //webSocket.send( document.getElementById('username').value+"已经上线了");
                    console.log("已经连通了websocket");
                };

                //接收后台服务端的消息
                webSocket.onmessage = function (evt)
                {
                    var received_msg = evt.data;
                    console.log("数据已接收:" +received_msg);
                    var obj = JSON.parse(received_msg);
                    console.log("可以解析成json:"+obj.messageType);

                    //1代表上线 2代表有人下线 3棋局结束开始结算 4代表普通消息，就是棋局信息 5 棋局中其他人上线
                    if(obj.messageType==1){
                        num = obj.num;
                        chessnum = obj.cn;
                        console.log("棋局号"+chessnum);
                        playernum = obj.playernum;
                        console.log("棋手号"+playernum);
                        piecesPlay = playernum;

                        otherFirstPlayer = (piecesPlay + 1) % 4;
                        otherSecondPlayer = (piecesPlay + 2) % 4;
                        otherThirdPlayer = (piecesPlay + 3) % 4;

                        let p = playernum + 1;

                        initChessBoard();
                        // 初始化各玩家棋子参数

                        initChessPlay();
                        // 在候选区画出棋子
                        drawChess();

                        // 为每个在候选区的棋子添加点击事件，使其可以显示在展示区
                        candChessClick();

                        // 展示区内的棋子添加操作
                        chessChangeOperating();

                        // alert("开始新的一局，您是第"+p+"位");
                        if(nowplayer == playernum){
                            $('#button4').css("display","inline-block");
                        }else {
                            $('#button4').css("display","none");
                        }

                    }
                    else if(obj.messageType==2){
                        let username = obj.username;
                        alert("玩家"+username+"已退出 棋局结束");
                        // alert("棋局结束");
                        closeWebSocket();
                        //跳转到初始界面
                        window.location.href = "main";


                    }
                    else if(obj.messageType==3){
                        // alert("四人全部放弃，棋局结束");
                        let cb = obj.chessBoard;
                        console.log(cb);
                        let a = [];
                        a = cb.split("#");
                        for(let l = 0; l < a.length; l++){
                            let split = [];
                            split = a[l].split(",");
                            for(let i = 0; i < split.length; i++){
                                boxIndex[l][i] = split[i];
                            }
                        }
                        drawChessBoard(boxIndex);
                        // chessBoard = chessbord1;
                        console.log(boxIndex);
                        let r = obj.red;
                        let y = obj.yellow;
                        let b = obj.blue;
                        let g = obj.green;
                        let win = obj.win;

                        alert("红色棋子数: "+r+"\n"+"黄色棋子数: "+y+"\n"+"蓝色棋子数: "+b+"\n"+"绿色棋子数: "+g+"\n"+"胜利者为: "+win);

                        closeWebSocket();
                        console.log(replay);
                        let c = confirm("是否确认开始复盘？");
                        if(c == true){
                            drawChessBoard(replay[0]);
                            $("#rebutton").css("display","inline-block");

                            $("#chplace").css("display","none");

                            $("#mychange").css("display","none");
                        }else {
                            //跳转到初始界面
                            window.location.href = "main";
                        }


                    }
                    else if(obj.messageType==4){


                        abandon = obj.abandon;
                        console.log("放弃人数为:"+abandon);
                        nowplayer = obj.nowplayer;
                        console.log(nowplayer);
                        // let chessbord1 = [];
                        let cb = obj.chessBoard;
                        console.log(cb);
                        let a = [];
                        a = cb.split("#");
                        for(let l = 0; l < a.length; l++){
                            let split = [];
                            split = a[l].split(",");
                            for(let i = 0; i < split.length; i++){
                                boxIndex[l][i] = split[i];
                            }
                        }
                        drawChessBoard(boxIndex);
                        replay[rnum] = new Array();
                        for(let i = 0; i < boxIndex.length; i++){
                            replay[rnum][i] = new Array();
                            for(let j = 0; j < boxIndex[i].length; j++){
                                replay[rnum][i][j] = boxIndex[i][j];
                            }
                        }
                        rnum++;
                        // chessBoard = chessbord1;
                        console.log("复盘");
                        console.log(rnum-1);
                        console.log(replay[rnum - 1]);
                        // chessBoard
                        if(nowplayer == playernum ){
                            $('#button4').css("display","inline-block");
                            if(!flag){
                                send();
                                $('#button4').css("display","none");
                                alert("您已弃权，自动下一位");
                            }
                        }else {
                            $('#button4').css("display","none");
                        }
                    }else {

                        num = obj.num;
                        console.log(num);
                        if(num < 4){
                            $("#mymain").css("display","none");
                            // alert("当前人数为"+num+"，请等待");
                            $("#msg").text("当前人数为"+num);
                        }else{
                            $("#mymain").css("display","inline-block");
                            $("#notice").css("display","none");
                            alert("人数已达四人，游戏开始");
                        }
                    }
                };

                //连接关闭的回调事件
                webSocket.onclose = function()
                {
                    console.log("连接已关闭...");
                };
            }
            else{
                // 浏览器不支持 WebSocket
                alert("您的浏览器不支持 WebSocket!");
            }
        }




        function closeWebSocket() {
            //直接关闭websocket的连接
            webSocket.close();
        }

        function send() {
            var x = convert(boxIndex);
            console.log(x)
            var message = {
                "chessnum": chessnum,
                "username":s,
                "chessBoard": x,
                "abandon": abandon
            };
            console.log(message)
            webSocket.send(JSON.stringify(message));

        }

        function convert(chess){
            let m = chess[0];
            m+="#";
            for(let i = 1; i < chess.length; i ++){
                m+=chess[i];
                if(i != chess.length){
                    m+="#";
                }
            }
            console.log(m);
            return m;

        }

    </script>

</head>
<body>

<div>
    <span class="glyphicon glyphicon-volume-up" id="bgmup" style="font-size: 25px; position: absolute; left: 20px;"></span>
    <span class="glyphicon glyphicon-volume-off" id="bgmoff" style="font-size: 25px; position: absolute; left: 20px;  display: none;"></span>
</div>
<div id="notice" style="width: 1880px; height: 800px;">
    <!--    提示当前人数-->
    <div id="msg" style="position:absolute; left:900px; height: 50px; font-size: 40px; font-family: STXingkai">

    </div>
    <!--    背景效果-->
    <section>
        <div class="at-at">
            <div class="at-at-content">
                <div class="at-at-body">
                    <div class="at-at-head">
                        <div class="at-at-neck">
                            <div class="neck-ribs">
                                <div class="neck-cable-first"></div>
                                <div class="neck-cable-second"></div>
                                <div class="neck-cable-last"></div>
                                <i></i><i></i><i></i><i></i>
                            </div>
                            <div class="neck-bg"></div>
                        </div>
                        <div class="head-bg">
                            <div class="head-snout">
                                <div class="in-head-snout"></div>
                                <div class="head-snout-gun"></div>
                            </div>
                            <i class="head-bg-first"></i>
                            <i class="head-bg-second"></i>
                        </div>
                        <div class="head">
                            <div class="head-chin">
                                <i class="head-chin-bg-first"></i>
                                <i class="head-chin-bg-second"></i>
                                <i class="head-gun"></i>
                                <i class="fire"><i></i><i></i><i></i></i>
                            </div>
                        </div>
                        <i class="head-left-bg"></i>
                        <i class="head-top-bg"></i>
                    </div>
                    <div class="at-at-body-left">
                        <i class="at-at-body-left-bg-1"></i>
                        <i class="at-at-body-left-bg-2"></i>
                        <i class="at-at-body-left-bg-3"></i>
                        <i class="at-at-body-left-bg-4"></i>
                        <i class="at-at-body-left-bg-5"></i>
                        <div class="at-at-body-left-bg"></div>
                    </div>
                    <div class="at-at-body-right">
                        <i class="at-at-body-right-bg-1"></i>
                        <i class="at-at-body-right-bg-2"></i>
                        <i class="at-at-body-right-bg-3"></i>
                        <i class="at-at-body-right-bg-4"></i>
                        <i class="at-at-body-right-bg-5"></i>
                        <div class="at-at-body-right-bg"></div>
                    </div>
                    <div class="at-at-body-bottom">
                        <div class="at-at-body-bottom-bg"><i></i><i></i><i></i></div>
                        <div class="body-bottom-left"></div>
                    </div>
                    <div class="at-at-body-bg">
                        <i></i><i></i><i></i><i></i>
                        <div class="i"></div>
                    </div>
                    <div class="at-at-body-bg-first-block">
                        <i class="at-at-body-bg-first-block-item-1"></i>
                        <i class="at-at-body-bg-first-block-item-2"></i>
                        <i class="at-at-body-bg-first-block-item-3"></i>
                    </div>
                    <div class="at-at-body-bg-second-block">
                        <i class="at-at-body-bg-second-block-item-1"></i>
                        <i class="at-at-body-bg-second-block-item-2"></i>
                    </div>
                    <div class="at-at-body-bg-third-block">
                        <i class="at-at-body-bg-third-block-item-1"></i>
                        <i class="at-at-body-bg-third-block-item-2"></i>
                        <i class="at-at-body-bg-third-block-item-3"></i>
                    </div>
                </div>
                <div class="dark-bg">
                    <i class="dark-bg-right"></i>
                </div>
            </div>
            <div class="leg-content leg-front">
                <div class="leg-first-joint"><i></i></div>
                <div class="leg-first">
                    <i class="leg-first-hr-a"></i>
                    <i class="leg-first-hr-b"></i>
                    <div class="in-first-leg">
                        <div class="leg-second-joint"><i></i></div>
                        <div class="leg-second">
                            <i class="leg-second-hr"></i>
                            <div class="in-second-leg">
                                <div class="foot-joint"><i class="foot-ankle"><i class="foot-ankle-bg"></i></i></div>
                                <div class="foot-ankle-bottom"></div>
                                <div class="foot-ankle-space"></div>
                                <div class="foot">
                                    <div class="foot-bottom"></div>
                                    <div class="foot-land"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="leg-content leg-rear">
                <div class="leg-first-joint"><i></i></div>
                <div class="leg-first">
                    <i class="leg-first-hr-a"></i>
                    <i class="leg-first-hr-b"></i>
                    <div class="in-first-leg">
                        <div class="leg-second-joint"><i></i></div>
                        <div class="leg-second">
                            <i class="leg-second-hr"></i>
                            <div class="in-second-leg">
                                <div class="foot-joint"><i class="foot-ankle"><i class="foot-ankle-bg"></i></i></div>
                                <div class="foot-ankle-bottom"></div>
                                <div class="foot-ankle-space"></div>
                                <div class="foot">
                                    <div class="foot-bottom"></div>
                                    <div class="foot-land"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="leg-content leg-front-back">
                <div class="leg-first-joint"><i></i></div>
                <div class="leg-first">
                    <i class="leg-first-hr-a"></i>
                    <i class="leg-first-hr-b"></i>
                    <div class="in-first-leg">
                        <div class="leg-second-joint"><i></i></div>
                        <div class="leg-second">
                            <i class="leg-second-hr"></i>
                            <div class="in-second-leg">
                                <div class="foot-joint"><i class="foot-ankle"><i class="foot-ankle-bg"></i></i></div>
                                <div class="foot-ankle-bottom"></div>
                                <div class="foot-ankle-space"></div>
                                <div class="foot">
                                    <div class="foot-bottom"></div>
                                    <div class="foot-land"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="leg-content leg-rear-back">
                <div class="leg-first-joint"><i></i></div>
                <div class="leg-first">
                    <i class="leg-first-hr-a"></i>
                    <i class="leg-first-hr-b"></i>
                    <div class="in-first-leg">
                        <div class="leg-second-joint"><i></i></div>
                        <div class="leg-second">
                            <i class="leg-second-hr"></i>
                            <div class="in-second-leg">
                                <div class="foot-joint"><i class="foot-ankle"><i class="foot-ankle-bg"></i></i></div>
                                <div class="foot-ankle-bottom"></div>
                                <div class="foot-ankle-space"></div>
                                <div class="foot">
                                    <div class="foot-bottom"></div>
                                    <div class="foot-land"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg">
            <i class="star star-1"></i>
            <i class="star star-2"></i>
            <i class="star star-3"></i>
            <i class="star star-4"></i>
            <i class="star star-5"></i>
            <i class="star star-6"></i>
            <i class="star-small star-small-1"></i>
            <i class="star-small star-small-2"></i>
            <i class="star-small star-small-3"></i>
            <i class="star-small star-small-4"></i>
            <i class="star-small star-small-5"></i>
            <i class="star-small star-small-6"></i>
            <i class="star-small star-small-7"></i>
            <i class="star-small star-small-8"></i>
            <i class="star-small star-small-9"></i>
            <i class="star-small star-small-10"></i>
        </div>
        <i class="moon"></i>
        <i class="mountain-first">
            <i class="mountain-shadow"></i>
        </i>
        <i class="mountain-second">
            <i class="mountain-shadow"></i>
            <span class="mountain-top"></span>
        </i>
        <div class="first-bg">
            <div class="first-bg-anim">
                <i class="first"></i>
                <i class="second"></i>
                <i class="third"></i>
                <i class="last"></i>
            </div>
            <div class="second-bg-anim">
                <div class="first-rock-content">
                    <div class="rock-content rock-content-1">
                        <i class="rock rock-big rock-1"></i>
                        <i class="rock rock-big rock-2"></i>
                        <i class="rock rock-big rock-3"></i>
                        <i class="rock rock-middle rock-7"></i>
                        <i class="rock rock-middle rock-8"></i>
                        <i class="rock rock-middle rock-9"></i>
                        <i class="rock rock-middle rock-10"></i>
                        <i class="rock rock-middle rock-11"></i>
                        <i class="rock rock-middle rock-12"></i>
                        <i class="rock rock-middle rock-13"></i>
                        <i class="rock rock-middle rock-14"></i>
                    </div>
                    <div class="rock-content rock-content-2">
                        <i class="rock rock-big rock-1"></i>
                        <i class="rock rock-big rock-2"></i>
                        <i class="rock rock-big rock-3"></i>
                        <i class="rock rock-middle rock-7"></i>
                        <i class="rock rock-middle rock-8"></i>
                        <i class="rock rock-middle rock-9"></i>
                        <i class="rock rock-middle rock-10"></i>
                        <i class="rock rock-middle rock-11"></i>
                        <i class="rock rock-middle rock-12"></i>
                        <i class="rock rock-middle rock-13"></i>
                        <i class="rock rock-middle rock-14"></i>
                    </div>
                    <div class="rock-content rock-content-3">
                        <i class="rock rock-big rock-1"></i>
                        <i class="rock rock-big rock-2"></i>
                        <i class="rock rock-big rock-3"></i>
                        <i class="rock rock-middle rock-7"></i>
                        <i class="rock rock-middle rock-8"></i>
                        <i class="rock rock-middle rock-9"></i>
                        <i class="rock rock-middle rock-10"></i>
                        <i class="rock rock-middle rock-11"></i>
                        <i class="rock rock-middle rock-12"></i>
                        <i class="rock rock-middle rock-13"></i>
                        <i class="rock rock-middle rock-14"></i>
                    </div>
                    <div class="rock-content rock-content-4">
                        <i class="rock rock-big rock-1"></i>
                        <i class="rock rock-big rock-2"></i>
                        <i class="rock rock-big rock-3"></i>
                        <i class="rock rock-middle rock-7"></i>
                        <i class="rock rock-middle rock-8"></i>
                        <i class="rock rock-middle rock-9"></i>
                        <i class="rock rock-middle rock-10"></i>
                        <i class="rock rock-middle rock-11"></i>
                        <i class="rock rock-middle rock-12"></i>
                        <i class="rock rock-middle rock-13"></i>
                        <i class="rock rock-middle rock-14"></i>
                    </div>
                    <div class="rock-content rock-content-5">
                        <i class="rock rock-big rock-1"></i>
                        <i class="rock rock-big rock-2"></i>
                        <i class="rock rock-big rock-3"></i>
                        <i class="rock rock-middle rock-7"></i>
                        <i class="rock rock-middle rock-8"></i>
                        <i class="rock rock-middle rock-9"></i>
                        <i class="rock rock-middle rock-10"></i>
                        <i class="rock rock-middle rock-11"></i>
                        <i class="rock rock-middle rock-12"></i>
                        <i class="rock rock-middle rock-13"></i>
                        <i class="rock rock-middle rock-14"></i>
                    </div>
                    <div class="rock-content rock-content-6">
                        <i class="rock rock-big rock-1"></i>
                        <i class="rock rock-big rock-2"></i>
                        <i class="rock rock-big rock-3"></i>
                        <i class="rock rock-middle rock-7"></i>
                        <i class="rock rock-middle rock-8"></i>
                        <i class="rock rock-middle rock-9"></i>
                        <i class="rock rock-middle rock-10"></i>
                        <i class="rock rock-middle rock-11"></i>
                        <i class="rock rock-middle rock-12"></i>
                        <i class="rock rock-middle rock-13"></i>
                        <i class="rock rock-middle rock-14"></i>
                    </div>
                </div>
                <div class="second-rock-content">
                    <div class="rock-content rock-content-1">
                        <i class="rock rock-big rock-1"></i>
                        <i class="rock rock-big rock-2"></i>
                        <i class="rock rock-big rock-3"></i>
                        <i class="rock rock-middle rock-7"></i>
                        <i class="rock rock-middle rock-8"></i>
                        <i class="rock rock-middle rock-9"></i>
                        <i class="rock rock-middle rock-10"></i>
                        <i class="rock rock-middle rock-11"></i>
                        <i class="rock rock-middle rock-12"></i>
                        <i class="rock rock-middle rock-13"></i>
                        <i class="rock rock-middle rock-14"></i>
                    </div>
                    <div class="rock-content rock-content-2">
                        <i class="rock rock-big rock-1"></i>
                        <i class="rock rock-big rock-2"></i>
                        <i class="rock rock-big rock-3"></i>
                        <i class="rock rock-middle rock-7"></i>
                        <i class="rock rock-middle rock-8"></i>
                        <i class="rock rock-middle rock-9"></i>
                        <i class="rock rock-middle rock-10"></i>
                        <i class="rock rock-middle rock-11"></i>
                        <i class="rock rock-middle rock-12"></i>
                        <i class="rock rock-middle rock-13"></i>
                        <i class="rock rock-middle rock-14"></i>
                    </div>
                    <div class="rock-content rock-content-3">
                        <i class="rock rock-big rock-1"></i>
                        <i class="rock rock-big rock-2"></i>
                        <i class="rock rock-big rock-3"></i>
                        <i class="rock rock-middle rock-7"></i>
                        <i class="rock rock-middle rock-8"></i>
                        <i class="rock rock-middle rock-9"></i>
                        <i class="rock rock-middle rock-10"></i>
                        <i class="rock rock-middle rock-11"></i>
                        <i class="rock rock-middle rock-12"></i>
                        <i class="rock rock-middle rock-13"></i>
                        <i class="rock rock-middle rock-14"></i>
                    </div>
                    <div class="rock-content rock-content-4">
                        <i class="rock rock-big rock-1"></i>
                        <i class="rock rock-big rock-2"></i>
                        <i class="rock rock-big rock-3"></i>
                        <i class="rock rock-middle rock-7"></i>
                        <i class="rock rock-middle rock-8"></i>
                        <i class="rock rock-middle rock-9"></i>
                        <i class="rock rock-middle rock-10"></i>
                        <i class="rock rock-middle rock-11"></i>
                        <i class="rock rock-middle rock-12"></i>
                        <i class="rock rock-middle rock-13"></i>
                        <i class="rock rock-middle rock-14"></i>
                    </div>
                    <div class="rock-content rock-content-5">
                        <i class="rock rock-big rock-1"></i>
                        <i class="rock rock-big rock-2"></i>
                        <i class="rock rock-big rock-3"></i>
                        <i class="rock rock-middle rock-7"></i>
                        <i class="rock rock-middle rock-8"></i>
                        <i class="rock rock-middle rock-9"></i>
                        <i class="rock rock-middle rock-10"></i>
                        <i class="rock rock-middle rock-11"></i>
                        <i class="rock rock-middle rock-12"></i>
                        <i class="rock rock-middle rock-13"></i>
                        <i class="rock rock-middle rock-14"></i>
                    </div>
                    <div class="rock-content rock-content-6">
                        <i class="rock rock-big rock-1"></i>
                        <i class="rock rock-big rock-2"></i>
                        <i class="rock rock-big rock-3"></i>
                        <i class="rock rock-middle rock-7"></i>
                        <i class="rock rock-middle rock-8"></i>
                        <i class="rock rock-middle rock-9"></i>
                        <i class="rock rock-middle rock-10"></i>
                        <i class="rock rock-middle rock-11"></i>
                        <i class="rock rock-middle rock-12"></i>
                        <i class="rock rock-middle rock-13"></i>
                        <i class="rock rock-middle rock-14"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="space-ship space-ship-small">
            <i class="space-ship-wing"></i>
            <i class="space-ship-bg"><i class="space-ship-gun"></i></i>
        </div>
        <div class="space-ship space-ship-big">
            <i class="space-ship-wing"></i>
            <i class="space-ship-bg"><i class="space-ship-gun"></i></i>
        </div>
    </section>
</div>
<audio preload="auto"  id="bm">
    <source src="music/button02a.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

<audio loop="loop"  autoplay="autoplay" preload="auto"  id="bgm">
    <source src="music/7895.wav" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

<div class="chess-content" id="mymain">
    <div class="candidate" id="chplace">
        <div class="chess-place"></div>
        <div style="position: absolute; left: 160px; bottom: -55px">
            <button type="button" class="btn btn-primary btn-lg" id="button5" >永久跳过</button>
        </div>
    </div>

    <div class="box">
        <div class="chess-board"></div>
        <div class="chess-confirm">
            <button type="button" class="btn btn-primary btn-lg" id="button4">确定</button>
        </div>
    </div>

    <div class="exhibition" id="mychange">
        <div class="exhi-content"></div>
        <div class="exhi-operate">
            <button type="button" class="btn btn-primary btn-lg" id="button1">左右翻转</button>
            <button type="button" class="btn btn-primary btn-lg" id="button2">旋转</button>
            <button type="button" class="btn btn-primary btn-lg" id="button3">上下翻转</button>
        </div>
    </div>
    <div style="position: absolute; right: 200px; bottom: 150px; display: none" id="rebutton">
        <button type="button" class="btn btn-primary btn-lg" id="button6" >上一步</button>
        <button type="button" class="btn btn-primary btn-lg" id="button7" >下一步</button>
    </div>
</div>
</body>
</html>
